<template>
  <div class="app">
    <button @click="openDialog">退出按钮</button>
    <BaseDialog :visible="isShow" @update:isShow="isShow=$event"></BaseDialog>

    <!-- 
      .sync 修饰符
      作用: 可以实现子组件与父组件数据的双向绑定,简化代码
      特点: prop属性名,可以自定义,非固定的为value
      场景: 封装弹框类的基础组件
      本质: 就是 ":属性名" 和 "@update:属性名" 合写
     -->
     <!-- isShowSimple.sync  => :isShowSimple="isShowSimple1111" @update:isShowSimple="isShowSimple1111=$event" -->
     <!-- @update: 是固定的写法 -->
    <BaseDialogSimple :isShowSimple.sync="isShowSimple"></BaseDialogSimple>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
import BaseDialogSimple from './components/BaseDialogSimple.vue'
export default {
  data() {
    return {
      isShow: false,
      isShowSimple1111: false,
    }
  },
  methods: {
    openDialog() {
      this.isShow = true
      this.isShowSimple = true
      // console.log(document.querySelectorAll('.box')); 
    },
  },
  components: {
    BaseDialog,
    BaseDialogSimple
  },
}
</script>

<style>
</style>